<template>
    <div class="page">
        <div class="header">
            <span>{{ count }}</span>
        </div>
        <div class="nav">
            <span @click="nav('Detail')">detail</span>
            <span @click="nav('About')">about</span>
        </div>
        <router-view class="container"></router-view>
    </div>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router';
import {computed} from 'vue';
import {useStore} from 'vuex';
import {Permission} from './api';

const router = useRouter();
const store = useStore();
Permission.login({})
    .then((res: any) => {
        const {data} = res;
        const b = data.translate({
            id: 'key'
        });
        console.log(data, b);
    })
    .catch((err: any) => {
        console.log(err);
    });
const count = computed(() => store.state.count);
const nav = (key: string) => {
    router.push({
        name: key
    });
};
</script>

<style scoped lang="less">
.page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.container {
    flex: 1;
    width: 100%;
}
.header {
    width: 100%;
    height: 60px;
    background-image: linear-gradient(45deg, #abcdef, #123456);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 30px;
    span {
        font-size: 16px;
        color: #abcdef;
    }
}
.nav {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    span {
        margin: 20px;
        text-decoration: underline;
        cursor: pointer;
    }
}
</style>
